<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* #app{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            text-shadow: 2px 2px 2px #ccc;
            color: pink;
            font-size: 40px;
            font-weight: bolder;
        } */
        .container {
            display: flex;
        }
        .container>div {
            flex: 1;
            width: 100%;
            /* overflow: hidden; */
            max-width: 240px;
            max-height: 240px;
            aspect-ratio: 1;

        }
        .container>div img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    </style>
</head>

<body>
    <!-- <script src="./main.js"></script> -->
    <!-- <div id="app"></div> -->
    <!-- <div class="container">
        <div>
            <img src="./boy.png" alt="">
        </div>
        <div>

            <img src="./abcBG.jpg" alt="">
        </div>
        <div>

            <img src="./19幻影换届合照.png" alt="">
        </div>
        <div>

            <img src="./OIP.jfif" alt="">
        </div>

    </div> -->
    <!-- <script>
        // 模拟实现vue的响应式，数据改变，视图就更新
        // 模拟new操作符，这个只是补充，用原版的new也可以
        const New = (Fn, ...args) => {
            if (typeof Fn !== 'function') { throw 'error' }
            const newObj = Object.create(Fn.prototype)
            const result = Fn.apply(newObj, args)
            if (result instanceof Object) { return result }
            return newObj
        }
        // 模拟Vue构造函数
        function Vue(t) {
            this.data = t
        }
        // 模拟Vue的挂载方法
        Vue.prototype.mount = function (str) {
            document.querySelector(str).innerHTML = this.data
        }
        const getTime = () => {
            const addZero = num => num < 10 ? `0${num}` : `${num}`
            const now = new Date()
            return `${addZero(now.getHours())} :
                    ${addZero(now.getMinutes())} :
                    ${addZero(now.getSeconds())}`
        }
        // 创建一个vue实例
        const vm = New(Vue, getTime())
        // 模拟订阅者
        const subscriber = () => {
            vm.mount('#app') // 兼解析器
        }
        // 模拟观察者
        const observer = (obj, key) => {
            if (!obj || obj[key] === undefined) { return }
            let value = obj[key]
            // 设置成访问器属性
            Object.defineProperty(obj, key, {
                get: () => value,
                set: newVal => {
                    if (value !== newVal) {
                        value = newVal
                        subscriber()
                    }
                }
            })
        }
        // 运行观察者
        observer(vm, 'data')
        // 运行订阅者
        subscriber()
        setInterval(() => { vm.data = getTime() }, 1000)

    </script> -->
    <!-- <script>
        const module = require('http');
        var http = require('http');

        http.createServer(function (request, response) {

            // 发送 HTTP 头部 
            // HTTP 状态值: 200 : OK
            // 内容类型: text/plain
            response.writeHead(200, {'Content-Type': 'text/plain'});

            // 发送响应数据 "Hello World"
            response.end('Hello World\n');
        }).listen(8888);

        // 终端打印如下信息
        console.log('Server running at http://127.0.0.1:8888/');
    </script> -->
    <iframe src="" id="container" frameborder="0"></iframe>
    <script>
        // const container = document.querySelector('#container')
        // const foods = {
        //     init(el, data){
        //         this.createElement(el,data)
        //         this.addEvent()
        //     },
        //     createElement(el,data){
        //         const plate = document.createElement('div')
        //         plate.className = 'plate'
        //         plate.innerText = '餐盘'

        //         const oUl = document.createElement('ul')
        //         oUl.className = 'foods'
        //         data.forEach(item => {
        //             const oLi = document.createElement('li')
        //             oLi.innerText = item
        //             oLi.draggable = true
        //             oLi.className = 'food'

        //             oUl.appendChild(oLi)
        //         })
        //         el.appendChild(oUl)
        //         el.appendChild(plate)
        //     },
        //     addEvent(){
        //         const plate = document.querySelector('.plate')
        //         const oUl = document.createElement('ul')
        //         oUl.className = 'p'
        //         const foodNodes = document.querySelectorAll('.foods .food')

        //         foodNodes.forEach(item => {
        //             let node 
        //             item.addEventListener('mousedown', () => {
        //                 node = document.createElement('li')
        //                 oLi.innerText = item
        //                 oLi.draggable = true
        //                 oLi.className = 'food'
        //             })
        //             item.addEventListener('mousemove', (e) => {
        //                 node = document.createElement('li')
        //                 oLi.innerText = item
        //                 oLi.draggable = true
        //                 oLi.className = 'food'
        //             })
        //             item.addEventListener('mouseup', () => {
        //                 oUl.appendChild(node)
        //             })
        //         })
        //         plate.appendChild(oUl)
        //     }
        // }
        // foods.init(container, ['a', 'b'])
        // 在发送消息的窗口中
        const targetWindow = document.getElementById('container').contentWindow;
        const message = { type: 'greeting', text: 'Hello from parent' };

        // 发送消息，指定目标窗口的 origin
        targetWindow.postMessage(message, 'https://example.com');

        // 在接收消息的窗口中
        window.addEventListener('message', (event) => {
            // 检查消息的来源
            if (event.origin !== 'https://example.com') {
                return; // 忽略来自不可信源的消息
            }

            // 处理接收到的消息
            console.log('Message received:', event.data);
        });
    </script>
</body>

</html>